<template>
	<view class="min-player-wraper" @click="BackToMainPlay">
		<div class="min-player-wraper" v-if="currentPlayInfo.id">

			<p class="song-name">{{currentPlayInfo.name}}-{{currentPlayInfo.singerInfo.name}}</p>
			<!-- <span class="icon iconfont play-pause play" @click="tooglePlay">{{!isPlaying?'&#xe636;':"&#xe771;"}}</span> -->
			<p class="song-name">......</p>
			<image class="min-cover" ref="minCover" :src="currentPlayInfo.albumInfo.picUrl" mode="widthFix"></image>
		</div>
		<p v-else>
			播放器君在休息 ♨️
		</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		updated() {},
		computed: {
			currentPlayInfo() {
				return this.$store.state.player.currentPlayInfo
			},
			audioContext() {
				return this.$store.state.player.audioPlayContext
			},
			isPlaying() {
				return this.$store.state.player.isPlaying
			}
		},
		watch: {
			isPlaying() {
				this.$refs.minCover.$el.style.animationPlayState = this.isPlaying ? "running" : "paused"
			}
		},
		methods: {
			BackToMainPlay() {
				uni.navigateTo({
					url: `/pages/player/player?id=${this.currentPlayInfo.id}`
				})
			},
			tooglePlay(e) {
				e.stopPropagation();
			}
		},
	}
</script>

<style lang="scss">
	.min-player-wraper {
		width: 100vw;
		height: 2.5rem;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 12px #9f9f9f;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;

		.song-name {
			font-size: .6rem;
		}

		.min-cover {
			width: 2.3rem;
			border-radius: 50%;
			animation: playRoute 5s linear infinite;
			box-shadow: 0px 0px 3px #000000;
		}

		.icon {
			font-size: 1.5rem;
			position: relative;
			z-index: 1;
		}
	}

	@keyframes playRoute {
		from {
			transform: rotatez(0deg);
		}

		to {
			transform: rotatez(360deg);
		}
	}
</style>
